<template>
  <div id="phone">
         <div class="sort">
          <div class="nav">
              <div class="top">
                  <h2>手机</h2>
                  <div class="ic">
                      <span>查看更多</span>
                      <a-icon type="right-circle" :style="{ fontSize: '20px', color: '#08c'  }" />
                  </div>
              </div>
              <div class="but">
                  <div class="left">
                      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
                  </div>
                  <div class="right">
                       <ul>
                     <template v-for="item in phone" >
                         
                          <li :key="item.id" @click="btn(item.id)">
                              <img :src="item.s_goods_photos[0].path" alt="">
                              <h4>{{item.name}}</h4>
                              <p>{{item.desc}}</p>
                              <span>{{item.price}}元起</span>
                          </li>
                       
                      
                     </template>
                     </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data:()=>{
        return{
            phone:[]
        }
    },
    async mounted(){
  let res = await  this._axios.get("/api/goods?project_id=38&classify_id=81");
 
  this.phone=res.data.result.rows
  console.log(this.phone);
},
methods:{
    btn(id){
        this.$router.push({name:'shop',query:{id}})
    }
}
}
</script>

<style lang='scss' scoped>
 #phone{
    .sort{
       width: 1226px;
       margin: 0 auto;
       
       .nav{
           .top{
            position: relative;
            line-height: 58px;
            .ic{
                position: absolute;
                right: 0;
                top: 0;
                
                span{
                    display: inline-block;
                    font-size: 16px;
                    margin-right: 20px;
                }
                
            }
           }
           .but{
                 width: 1226px;
                 display: flex;
                 .left{
                     flex: 2;
                    img{
                         width: 234px;
                     height: 614px;
                    }
                 }
                 .right{
                     flex: 8;
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        
                        li{
                            text-align: center;
                            margin-bottom: 15px;
                            display: inline-block;
                            background-color: #fff;
                            width: 234px;
                            height: 300px;
                            box-sizing: border-box;
                            padding: 20px 0;
                            img{
                                width: 160px;
                                height: 160px;
                            }
                            p{
                                font-size: 12px;
                                color: #b0b0b0;
                            }
                            span{
                                color: #ff6700;
                            }
                        }
                    }
                 }
           }
       }
   }
 }
</style>